
<script setup lang="ts">
  const router = useRouter()
  const route = useRoute()

  const userId = route.params.id
  const showSearchCont = ref(false)
  const nuxtApp = useNuxtApp()
  nuxtApp.$tokenExpireJudge()
  // 获取个人信息
  const userInfo = ref({})

  const navItemArr = ref([
    {
      title: '动态',
      routeName: '',
      active: true,
      type: 'link'
    },{
      title: '文章',
      routeName: 'posts',
      active: false,
      type: 'link'
    },{
      title: '专栏',
      routeName: 'columns',
      active: false,
      type: 'link'
    },{
      title: '沸点',
      routeName: 'pins',
      active: false,
      type: 'link'
    },{
      title: '收藏集',
      routeName: 'collections',
      active: false,
      type: 'link'
    },{
      title: '关注',
      routeName: 'tags',
      active: false,
      type: 'link'
    },{
      title: '赞0',
      routeName: '',
      active: false,
      type: 'select',
      selectValue: '',
      options: [{
        label: '文章0',
        value: 'likes',
        routeName: 'likes',
        active: false,
        type: 'link',
      }
        // ,{
        //   label: '沸点0',
        //   value: 'praise',
        //   routeName: 'praise',
        //   active: false,
        //   type: 'link',
        // },{
        //   label: '咨询0',
        //   value: 'newliked',
        //   routeName: 'newliked',
        //   active: false,
        //   type: 'link',
        // }
      ]
    }
  ])

  function navSubRoute (rName: string) {
    navigateTo(`/user/${userId}${rName ? '/'+rName: ''}`)
  }
  function tabTap(e: any, index:number) {
    const nowActItem = navItemArr.value.find(item => item.active)
    nowActItem.active = false
    if (nowActItem.selectValue) nowActItem.selectValue = ''
    if (e.type === 'link') {
      e.active = true
      navSubRoute(e.routeName)
    }
  }
  function popSelect(e, index:number) {
    if (e) {
      navItemArr.value.find(item => item.active).active = false
      navItemArr.value[index].active = true
      navSubRoute(e)
    } else {
      navItemArr.value[index].selectValue = ''
      navItemArr.value[index].active = false
    }
  }

  onMounted(() => {
    userInfo.value = useUserInfo().value
    const uPath = route.path.split('/')
    if (uPath.length > 2) {
      const subRouteName = uPath[uPath.length-1]
      if (subRouteName.startsWith('search')) {
        showSearchCont.value = true
      } else if (subRouteName.startsWith('settings')) {
        navigateTo('/user/settings/profile', {
          replace: true
        })
      } else if (['likes', 'praise', 'newliked'].includes(subRouteName)) {
        navItemArr.value[0].active = false
        navItemArr.value[6].active = true
      } else {
        for(let item of navItemArr.value) {
          if (item.routeName && subRouteName.startsWith(item.routeName)) {
            navItemArr.value[0].active = false
            item.active = true
            break
          }
        }
      }
    }
  })
  function navBack() {
    showSearchCont.value = false
    router.back()
  }
  function tapTabSearch() {
    showSearchCont.value = true
    navSubRoute('search')
  }
</script>
<template>
  <main class="container main-container with-view-nav">
    <div class="view timeline-index-view">
      <div class="timeline-container">
        <!-- 主内容区 start -->
        <div class="timeline-content">
          <div class="timeline-entry-list">
            <div class="user-view">
              <div class="major-area">
                <div class="user-info-block block shadow">
                  <img
                    :src="userInfo.avatarUrl"
                    :alt="userInfo.avatarUrl"
                    class="lazy avatar">
                  <div class="info-box info-box">
                    <div class="top">
                      <div class="left">
                        <h1 class="username"><span class="user-name">{{userInfo.nickname}}</span></h1>
                      </div>
                      <div class="link-box link-box">
                        <span title="绑定微博" class="weibo-link link inactive" target="_blank">
                        <svg width="21" height="18" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg"
                             class="icon weibo-icon">
                          <g fill="none" fill-rule="nonzero">
                            <path fill="#D52B2A"
                                  d="M15.343 8.474c-.268-.08-.452-.135-.311-.489.304-.767.335-1.429.005-1.9-.619-.887-2.312-.839-4.252-.025 0 0-.61.267-.454-.217.299-.961.254-1.767-.21-2.232-1.054-1.055-3.853.04-6.254 2.445-1.798 1.802-2.842 3.711-2.842 5.362 0 3.158 4.042 5.078 7.996 5.078 5.184 0 8.633-3.018 8.633-5.413 0-1.448-1.217-2.27-2.31-2.609zm-6.311 6.89c-3.156.312-5.88-1.117-6.084-3.193-.205-2.075 2.187-4.01 5.342-4.323 3.156-.313 5.88 1.117 6.085 3.191.204 2.077-2.187 4.012-5.343 4.325z"></path>
                            <path fill="#E89213"
                                  d="M18.786 2.695a5.039 5.039 0 0 0-4.803-1.558.731.731 0 0 0 .304 1.43 3.584 3.584 0 0 1 3.415 1.108 3.6 3.6 0 0 1 .75 3.516.73.73 0 0 0 1.39.451v-.003a5.06 5.06 0 0 0-1.056-4.944"></path>
                            <path fill="#E89213"
                                  d="M16.863 4.433a2.453 2.453 0 0 0-2.34-.758.63.63 0 0 0 .263 1.23v.002a1.202 1.202 0 0 1 1.394 1.548.629.629 0 0 0 1.195.387 2.462 2.462 0 0 0-.512-2.409"></path>
                            <path fill="#040000"
                                  d="M9.347 9.445c-1.501-.391-3.199.359-3.85 1.684-.665 1.352-.023 2.853 1.494 3.344 1.572.507 3.424-.27 4.068-1.73.635-1.426-.158-2.895-1.712-3.298zm-1.146 3.453c-.306.488-.96.702-1.451.476-.486-.221-.629-.788-.324-1.263.302-.474.934-.685 1.422-.48.495.211.652.774.353 1.267zm1.005-1.293c-.11.189-.354.28-.545.201-.188-.077-.247-.289-.14-.474.11-.185.344-.276.531-.201.19.07.26.284.154.474z"></path>
                          </g>
                        </svg>
                      </span>
                        <span title="绑定 GitHub" class="github-link link inactive" target="_blank">
                        <svg width="21" height="18" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg"
                             class="icon github-icon">
                          <path fill="#161614" fill-rule="nonzero"
                                d="M1.857 9.203c0 3.624 2.456 6.698 5.862 7.782.429.076.585-.177.585-.395 0-.194-.007-.71-.012-1.395-2.384.496-2.887-1.1-2.887-1.1-.39-.947-.952-1.2-.952-1.2-.778-.508.06-.498.06-.498.86.058 1.312.846 1.312.846.765 1.253 2.007.89 2.495.68.078-.529.3-.89.544-1.095-1.903-.207-3.904-.911-3.904-4.054 0-.896.334-1.628.882-2.201-.088-.208-.383-1.042.084-2.171 0 0 .72-.22 2.357.84a8.557 8.557 0 0 1 2.146-.276 8.566 8.566 0 0 1 2.146.277c1.636-1.062 2.354-.841 2.354-.841.468 1.129.174 1.963.086 2.17.55.574.881 1.306.881 2.202 0 3.15-2.004 3.844-3.913 4.047.307.253.581.754.581 1.52 0 1.096-.01 1.98-.01 2.25 0 .219.154.474.589.394C16.546 15.898 19 12.825 19 9.203 19 4.673 15.162 1 10.428 1c-4.733 0-8.57 3.672-8.57 8.203z"></path>
                        </svg>
                      </span>
                        <span title="设置个人主页地址" class="site-link link inactive" target="_blank">
                        <svg width="21" height="18" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg"
                             class="icon site-icon">
                          <path fill="#0062D1" fill-rule="evenodd"
                                d="M12.956 5.684l-.04.08-.472-.043.1-.432.412.395m-1.459-1.84l-.663-.29c.452-.216.55-.17.663.29m1.683.133l-.11.02-2.015-2.098 2.394 1.091c-.271.228-.428.554-.269.987M10.334 1.93l.564-.205.078.074c-.11.127-.208.269-.339.366-.025.02-.175-.133-.303-.235m.018.619c.517.025.862.358 1.221.667l-.078.14-1.209-.688.066-.119M8.885 2.42c.202.051.393.085.57.157.03.012.03.253-.013.274-.146.076-.318.101-.49.149l-.067-.58m2.267 10.777c-.182-.2-.338-.423-.5-.64-.276-.366-.293-.75-.065-1.145.07-.122.152-.253.17-.388.035-.271-.13-.335-.376-.359-.18-.018-.463-.107-.503-.23-.189-.588-.728-.62-1.152-.773-.428-.153-.745-.336-.924-.78-.129-.318-.336-.603-.508-.903l-.05.018.167.739c-.112-.174-.185-.25-.215-.34-.207-.623-.481-1.237-.576-1.878-.055-.371.183-.788.292-1.183.016-.057.079-.112.073-.163a18.42 18.42 0 0 0-.13-.918c-.072-.432-.29-.504-.633-.22-.111.093-.232.172-.348.258l-.096-.101c.225-.28.41-.608.682-.826.39-.314.724-.756 1.386-.535.344.115.715.18 1.074.291.308.095.695-.076 1.047-.13L9.95 2.88l.515.339c.045.25-.04.443-.388.46-.091.004-.188.079-.266.142-.425.343-.399.572.086.822.533.274.533.274.701.638.053-.291.102-.583.16-.873.033-.168.079-.333.119-.5.14.065.276.143.422.193.376.13.691.347.952.65.09.106.186.207.335.373l-1.124.517-.005.152c.459-.47.5.087.737.173-.026.05-.04.09-.048.09-.687-.114-.782.618-1.207.877-.035.022-.08.083-.073.112.09.337-.14.482-.34.672-.085.082-.098.266-.1.405-.003.117.057.236.09.354l-.092.05c-.055-.068-.126-.128-.162-.205-.168-.358-.384-.435-.752-.27a.495.495 0 0 1-.247.03c-.368-.04-.555.09-.624.449-.08.408.103.87.385.92.087.015.205-.061.284-.126.11-.09.198-.209.295-.315l.103.053-.142.613c.119.035.238.046.327.104.08.053.18.154.184.239.028.482.425.716.835.475.6-.353 1.192-.206 1.736.098.37.208.659.564 1.022.792.251.157.563.222.855.305.451.128.51.226.304.651-.152.314-.269.674-.5.915-.506.527-1.079.986-1.617 1.482-.458.422-1.224.548-1.254 1.382-.353-.038-.461-.232-.383-.535.109-.425.244-.844.355-1.27.111-.42.019-.79-.277-1.115m4.934-8.278l-.128.09-.47-.757.098-.07.5.737m.487 3.061c.028-.165.062-.333.055-.498a.946.946 0 0 1 .424-.863c.071-.05.24-.06.293-.01.144.137.313.3.361.482.263 1.008.355 2.031.134 3.148-.233-.259-.4-.224-.585-.023-.163.177-.298.147-.441-.085-.42-.685-.365-1.41-.24-2.15m-.288-2.535c-.02-.281-.034-.563-.056-.935.747.402.751 1.15 1.09 1.682l-.452-.537-.078 1.066c-.338-.259-.543-.46-.46-.847.028-.133-.033-.285-.044-.43M10.857 1C6.525 1 3 4.589 3 9s3.525 8 7.857 8c4.333 0 7.857-3.589 7.857-8s-3.524-8-7.857-8"></path>
                        </svg>
                      </span>
                      </div>
                    </div>
                    <div class="user-info-icon">
                      <span blank="true" class="rank rank">
<!--                        <img-->
                        <!--                          src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a02c571ff5e24b90b0c7aa70c58ebd1c~tplv-k3u1fbpfcp-no-mark:0:0:0:0.awebp"-->
                        <!--                          alt="创作等级LV.1"-->
                        <!--                          class="lazy"-->
                        <!--                          title="创作等级LV.1"-->
                        <!--                          loading="lazy">-->
                        创作等级LV.{{userInfo.vipRank}}
                      </span>
                      <!--                      <span class="jueyou-level" show-jscore-level="true">-->
                      <!--                        <span class="byte-tooltip__wrapper">-->
                      <!--                        <img src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/9b2f31c663d17de59dd9e5fff272bb85.svg"-->
                      <!--                          alt="掘友1级：预备掘友" class="lazy" title="掘友1级：预备掘友"-->
                      <!--                          loading="lazy">-->
                      <!--                        </span>-->
                      <!--                      </span>-->
                    </div>
                    <div class="introduction">
                      <div class="left">
<!--                                              <div class="position">-->
<!--                                                <div st:name="profileBtn" title="填写职位信息" class="info-input">-->
<!--                                                  你从事什么职业？-->
<!--                                                </div>-->
<!--                                              </div>-->
<!--                                              <div class="intro">-->
<!--                                                <div st:name="profileBtn" title="填写个人介绍" class="info-input">-->
<!--                                                  你的武器库有哪些武（ji）器（shu）？-->
<!--                                                </div>-->
<!--                                              </div>-->
                      </div>
                      <div class="right">
                        <NuxtLink to="/user/settings/profile" >
                          <button class="setting-btn btn">
                            设置
                          </button>
                        </NuxtLink>
                      </div>
                    </div>
                  </div>
                </div>
                <div href="/badge/37841185539176" class="badge-wall">
                  <div class="badge-wrap">
                    <div class="badge-left"><img
                      src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/badge-count-icon.0586ac4.png" alt=""
                      class="count-icon">
                      <div class="badge-count">获得徽章 0</div>
                    </div>
                    <ul class="badge-list"><img
                      src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/b307148589ab904ec14c386e41b91fda.svg" alt=""
                      class="badge-icon"></ul>
                  </div>
                </div>
                <div class="list-block">
                  <div class="detail-list detail-list">
                    <div class="list-header">
                      <div class="header-content" v-if="!showSearchCont">
                        <div v-for="(item,index) in navItemArr"
                             :key="index"
                             class="nav-item router-link-exact-active"
                             :class="{active: item.active}">
                          <span v-if="item.type === 'link'" class="item-title" @click="tabTap(item,index)">{{item.title}}</span>
                          <ClientOnly v-if="item.type === 'select'">
                            <n-popselect v-model:value="item.selectValue" @change="popSelect($event, index)" :options="item.options" trigger="click">
                              <span class="item-title">{{ item.title }}</span>
                            </n-popselect>
                          </ClientOnly>
                        </div>
                        <div class="search-icon-container">
                          <span href="/user/37841185539176/search?search_type=0" class="" @click="tapTabSearch">
                            <img src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/4faa6e4d3204581da39135d50cec3f73.svg"
                                 alt=""
                                 class="search-icon">
                          </span>
                        </div>
                      </div>
                      <div v-if="showSearchCont" class="search-container">
                        <div class="return-content">
                          <div href="/user/37841185539176"
                               class="router-link-exact-active"
                               aria-current="page">
                            <div class="return" @click="navBack">
                              <img
                                src=""
                                class="icon">
                              <div class="title">返回</div>
                            </div>
                          </div>
                          <div class="pc-return">
                            <div class="line">|</div>
                            <div class="title">搜索文章</div>
                          </div>
                        </div>
                        <div class="search-input byte-input byte-input--normal byte-input--suffixed">
                          <input type="text" autocomplete="" placeholder="搜索 发布/点赞/收藏的文章" name="" aria-label=""
                                 spellcheck="false" class="byte-input__input byte-input__input--normal">
                          <span class="byte-input__suffix">
                            <i class="byte-icon byte-icon--search byte-input__search-icon">
                              <svg
                                t="1561632838264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                p-id="303787" xmlns:xlink="http://www.w3.org/1999/xlink"><path
                                d="M819.2 718.165333l154.282667 154.282667a23.210667 23.210667 0 0 1 0 32.768l-38.912 38.229333a22.528 22.528 0 0 1-32.085334 0L750.933333 793.258667a386.389333 386.389333 0 1 1 68.266667-75.093334zM500.394667 791.893333a291.498667 291.498667 0 1 0-290.816-291.498666 291.498667 291.498667 0 0 0 290.816 291.498666z"
                                p-id="303788"></path>
                              </svg>
                            </i>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class="list-body">
                      <NuxtPage/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右边栏 start -->
          <aside class="aside">
            <div id="main">
              <div id="show_time">春夏秋冬</div>
            </div>
            <div class="minor-area">
              <!--              <div class="sticky-wrap sticky">-->
              <!--                <div class="stat-block block shadow">-->
              <!--                  <div class="block-title">个人成就</div>-->
              <!--                  <div class="block-body">-->
              <!--                    <div class="stat-item">-->
              <!--                      <svg width="25" height="25" viewBox="0 0 25 25" class="icon stat-view-icon">-->
              <!--                        <g fill="none" fill-rule="evenodd">-->
              <!--                          <circle cx="12.5" cy="12.5" r="12.5" fill="#E1EFFF"></circle>-->
              <!--                          <path fill="#7BB9FF"-->
              <!--                                d="M4 12.5S6.917 7 12.75 7s8.75 5.5 8.75 5.5-2.917 5.5-8.75 5.5S4 12.5 4 12.5zm8.75 2.292c1.208 0 2.188-1.026 2.188-2.292 0-1.266-.98-2.292-2.188-2.292-1.208 0-2.188 1.026-2.188 2.292 0 1.266.98 2.292 2.188 2.292z"></path>-->
              <!--                        </g>-->
              <!--                      </svg>-->
              <!--                      <span class="content">-->
              <!--                文章被阅读-->
              <!--                <span class="count">15</span></span></div>-->
              <!--                    <a href="https://juejin.cn/book/6844733795329900551/section/6844733795371843597" target="_blank"-->
              <!--                       rel="nofollow noopener noreferrer" class="stat-item">-->
              <!--                      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"-->
              <!--                           class="icon stat-jp-icon">-->
              <!--                        <g fill="none" fill-rule="evenodd">-->
              <!--                          <circle cx="12.5" cy="12.5" r="12.5" fill="#E1EFFF"></circle>-->
              <!--                          <path fill="#7BB9FF"-->
              <!--                                d="M16.694 13.516l-3.719 3.055a1.1 1.1 0 0 1-1.412-.013l-2.77-2.362-3.597 2.437a.693.693 0 0 1-.895-.101.649.649 0 0 1-.008-.876l3.68-4.096a1.1 1.1 0 0 1 1.507-.122l2.653 2.135 2.248-2.4-1.34-1.358a.5.5 0 0 1 .327-.85l5.438-.313a.5.5 0 0 1 .528.533l-.368 5.449a.5.5 0 0 1-.855.317l-1.417-1.435z"></path>-->
              <!--                        </g>-->
              <!--                      </svg>-->
              <!--                      <span class="content">-->
              <!--                掘力值-->
              <!--                <span class="count">10</span></span></a></div>-->
              <!--                </div>-->
              <!--                <div class="follow-block block shadow"><a href="/user/37841185539176/following" class="follow-item"-->
              <!--                                                          rel="nofollow">-->
              <!--                  <div class="item-title">关注了</div>-->
              <!--                  <div class="item-count">-->
              <!--                    0-->
              <!--                  </div>-->
              <!--                </a> <a href="/user/37841185539176/followers" class="follow-item" rel="nofollow">-->
              <!--                  <div class="item-title">关注者</div>-->
              <!--                  <div class="item-count">-->
              <!--                    0-->
              <!--                  </div>-->
              <!--                </a></div>-->
              <!--                <div class="more-block block"><a href="/user/37841185539176/collections" class="more-item">-->
              <!--                  <div class="item-title">收藏集</div>-->
              <!--                  <div class="item-count">-->
              <!--                    3-->
              <!--                  </div>-->
              <!--                </a> <a href="/user/37841185539176/tags" class="more-item" rel="nofollow">-->
              <!--                  <div class="item-title">关注标签</div>-->
              <!--                  <div class="item-count">-->
              <!--                    0-->
              <!--                  </div>-->
              <!--                </a>-->
              <!--                  <div class="more-item">-->
              <!--                    <div class="item-title">加入于</div>-->
              <!--                    <div class="item-count">-->
              <!--                      <time datetime="2023-07-08T13:37:08.000Z" title="2023-07-08 21:37:08" class="time">-->
              <!--                        2023-07-08-->
              <!--                      </time>-->
              <!--                    </div>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
          </aside>
          <!-- 右边栏 end -->
        </div>
        <!-- 主内容区 end -->
      </div>
    </div>
  </main>

</template>
<style scoped lang="scss">
  ul {
    padding: 0;
    margin: 0;
  }

  #show_time {
    font-family: "Micro";
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    color: #fff;
    text-shadow: 1px 1px 2px #000
  }

  .main-container {
    @include clearfix;
    max-width: $largeContainerWith;
    .timeline-index-view {
      margin-top: 20px;
      display: flex;
      flex-direction: row;

      .index-nav {
        width: 180px;
        position: sticky;
        top: 80px;
        margin-right: 20px;
        height: fit-content;
        border-radius: 4px;
        background-color: var(--tidy-layer-1);
        max-height: calc(100vh - 101px);
        overflow-x: hidden;

        .side-navigator-wrap {
          min-width: 180px;
          box-sizing: border-box;
          padding: 8px;
          font-size: 16px;
          color: #f2f3f5;

          .nav-item-wrap {
            display: flex;
            flex-direction: column;

            .nav-item-content {
              line-height: 24px;
              border-radius: 4px;
              cursor: pointer;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;

              &.active-nav {
                font-weight: 500;
                background-color: var(--tidy-brand-6-light);
              }

              &:hover {
                background-color: var(--tidy-gray-3);
              }

              &:hover, &.active-nav {
                .nav-item {
                  color: var(--tidy-font-brand1-normal);
                  cursor: pointer;
                }
              }

              .nav-item {
                display: inline-block;
                width: 100%;
                box-sizing: border-box;
                position: relative;
                padding: 10px 17px;
                color: var(--tidy-font-2);

                .nav-item-text {
                  position: relative;
                  vertical-align: middle;
                }
                .item-title {
                  cursor: pointer;
                }
              }
            }
          }
        }
      }

      .timeline-container {
        margin: 0 auto;

        .timeline-content {
          position: relative;

          .timeline-entry-list {
            margin-right: 280px;
            border-radius: 2px;
            width: 720px;
            position: relative;
          }

          .aside {
            width: 260px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
          }
        }
      }
    }
  }

  .user-view {
    display: flex;
    margin-bottom: 72px;

    .major-area {
      flex: 1 1 auto;
      min-width: 0;

      .user-info-block {
        display: flex;
        padding: 30px;
        background-color: #fff;
        .avatar {
          flex: 0 0 auto;
          margin-right: 28px;
          width: 90px;
          height: 90px;
          background-color: #f9f9f9;
          border-radius: 50%;
        }

        .info-box {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .position {
            font-size: 15px;
            line-height: 1.5;
            color: #72777b;
            overflow: hidden;

            .info-input {
              color: #4a68ad;
              cursor: pointer;

              &:before {
                content: "+ ";
              }
            }
          }

          .intro {
            margin-top: 5px;
          }

          .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;

            .left {
              display: flex;

              .username {
                display: flex;
                align-items: center;
                margin: 0;
                padding: 0;
                font-size: 20px;
                font-weight: 600;
                line-height: 1.2;
                color: #000;

                .user-name {
                  display: inline-block;
                }
              }
            }
          }

          .user-info-icon {
            display: flex;
            align-items: center;
            line-height: 1.2;
            margin-bottom: 8px;

            .rank {
              display: inline-flex;
              align-items: center;
              margin-left: 4px;
              vertical-align: middle;

              img {
                vertical-align: super;
                width: 35px;
                height: 16px;
              }
            }

            .jueyou-level {
              margin-left: 8px;
              display: inline-flex;

              .byte-tooltip__wrapper {
                display: flex;
              }

              img {
                width: 45px;
                height: 16px;
                -o-object-fit: contain;
                object-fit: contain;
              }
            }
          }
          .introduction {
            display: flex;
            justify-content: space-between;

            .right {
              display: flex;
              align-items: flex-end;

              .setting-btn {
                color: #007fff;
                padding: 0;
                height: 34px;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.2;
                border: 1px solid #007fff;
                background-color: #fff;
                border-radius: 4px;
                width: 118px;
              }
            }
          }
        }
      }

      .badge-wall {
        display: flex;
        background-color: #fff;
        height: 52px;
        align-items: center;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        color: #1d2129;
        padding: 0 12px;
        text-decoration: none;
        cursor: pointer;

        .badge-wrap {
          display: flex;
          height: 100%;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #e4e6eb;

          .badge-left {
            display: flex;
            align-items: center;
            height: 28px;
            .count-icon {
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
          }

          .badge-list {
            display: flex;
            height: 28px;
            align-items: center;

            .badge-icon {
              margin-left: 14px;
              width: 7px;
              height: 13px;
            }
          }
        }
      }

      .list-block {
        margin-top: 12px;
        .list-body {
          background-color: #ffffff;
        }
        .list-header {
          position: relative;
          margin: 0;
          padding: 0;
          height: 48px;
          background-color: #fff;
          border-radius: 2px 2px 0 0;
          border-bottom: 1px solid #e4e6eb;
          z-index: 100;

          .header-content {
            display: flex;
            align-items: center;
            height: 100%;
            max-width: $largeContainerWith;
            white-space: nowrap;
            position: relative;
            margin: 0 auto;
            .nav-item {
              flex: 0 0 auto;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              /*width: 72px;*/
              height: 100%;

              .item-title {
                color: #252933;
                font-weight: 500;
                font-size: 16px;
                padding: 0 12px;
                cursor: pointer;
              }

              &.active {
                &:after {
                  content: "";
                  position: absolute;
                  width: 16px;
                  height: 3px;
                  border-radius: 50px;
                  left: 50%;
                  bottom: 0;
                  transform: translateX(-50%);
                  z-index: 10;
                  background-color: #1e80ff;
                }
              }
            }
            .search-icon-container {
              flex: 1;
              text-align: right;
              position: -webkit-sticky;
              position: sticky;
              right: 0;
              padding: 0 20px 0 10px;
              margin: 0 0 0 auto;
              background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, #fff);
            }
          }

          .search-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            max-width: $largeContainerWith;
            margin: 0 auto;

            .return-content {
              display: flex;
              align-items: center;

              .return {
                display: flex;
                margin-left: 20px;
                cursor: pointer;

                .icon {
                  width: 20px;
                  height: 20px;
                }

                .title {
                  font-size: 14px;
                  line-height: 22px;
                  margin-left: 4px;
                  color: #515767;
                }
              }

              .pc-return {
                font-size: 14px;
                line-height: 22px;
                display: flex;
                font-weight: 500;

                .line {
                  margin: 0 16px;
                  color: #e4e6eb;
                }
              }
            }

            .search-input {
              display: block;
              -webkit-animation: stretch-input .3s;
              animation: stretch-input .3s;
              width: 264px;
              margin-right: 20px;

              .byte-input__input {
                caret-color: #1e80ff;
                border-radius: 4px;
                box-shadow: none;
                padding: 5px 32px 5px 8px;
                resize: none;
                outline: none;
                width: 100%;
                display: block;
                border: 1px solid #ddd;
                transition: border .3s;
                background-color: #fff;
                box-sizing: border-box;

              }

              .byte-input__suffix {
                right: 0;
                display: flex;
                align-items: center;
                position: absolute;
                top: 0;
                bottom: 0;
                width: 48px;
                font-size: 14px;
                line-height: 1.5;
                border-collapse: separate;
                border-spacing: 0;

                .byte-icon {
                  font-size: 16px;
                  cursor: pointer;
                  width: 16px;
                  height: 16px;
                  display: inline-block;
                  vertical-align: middle;
                  line-height: 1;

                  svg {
                    width: 100%;
                    height: 100%;
                    fill: currentColor;
                    pointer-events: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .minor-area {
    flex: 0 0 auto;
    margin-left: 12px;
    line-height: 1.2;
  }
  @keyframes stretch-input {
    0% {
      width: 0;
      right: 44px;
    }
    100% {
      width: 264px;
      right: 0;
    }
  }
</style>
